<template>
	<view class="content">
		<nav-bar title="优惠券"></nav-bar>
		<scroll-view scroll-x :style="{backgroundColor: '#c27e15'}">
			<view class="tabs-box">
				<view v-for="(item, index) in tabList" :key="index"
					:class="['tabs-item', tabActive === item.value ? 'active-item' : '']" @click="clickTabsItem(item)">
					<view class="item">{{ item.label }}({{ couponNumConfig[item.numKey] || 0 }})</view>
					<view v-if="tabActive === item.value" class="bottom-line"></view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y :style="{ height: scrollHeight }">
			<view v-if="isLoading" class="common-loading">
				<image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
			</view>
			<view class="card" v-else-if="couponList && couponList.length">
				<view class="card-item" v-for="(item, index) in couponList" :key="index"
					:style="{ background: `url(${baseImgUrl}img_coupon_bg2.png)  no-repeat` }">
					<view class="left">
						<view class="money-once" v-if="item.discountsType == 1">
							<span
								class="money-item">{{ item.discountRate }}</span>折<!-- (100 - item.discountRate)/10 -->
						</view>
						<view class="money-once" v-if="item.discountsType == 2">
							￥<span class="money-item">{{ item.discountAmount }}</span>
						</view>
						<view class="money-twice">
							满￥{{ item.fullAmount }}可用
						</view>
					</view>
					<view class="right">
						<view class="right-content">
							<view class="right-title">
								{{ item.name }}
							</view>
							<view class="right-time">
								{{ item.effectiveTime }}到期
							</view>
							<view class="right-type">
								<!-- {{ item.couponTypeName }} -->
							</view>
							<view class="right-rule" @click="clickToDetail(item)">
								使用规则>>
							</view>
						</view>
						<view class="button">
							<view class="not-use-btn" v-if="tabActive === 0 && item.ifUse" @click="clickToUse">去使用
							</view>
							<view class="use-btn" v-if="tabActive === 2">已使用</view>
							<view class="not-use-btn" v-if="tabActive === 0 && item.give" @click="TransferCoupon(item)">
								转赠</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="common-no-data">
				<image class="no-data-img" :src="baseImgUrl + 'img_no_project.png'" alt="" />
				<view class="text">暂无优惠券</view>
			</view>
		</scroll-view>
		<you-popup :popupVisible="applyDialog" popupTitle="优惠券转赠" :safeArea="false" @popupClose="applyDialog = false"
			@cancel="applyDialog = false" @confirm="confirmOutOrder">
			<view slot="popupContent" class="out-content">
				<view style="display: flex;align-items: center;">
					转赠人手机号：
					<u-input type="number" placeholder="请输入转赠人手机号" border="surround" v-model="value"></u-input>
				</view>
			</view>
			<view slot="btnBox" class="popup-submit flexJcac">
				<view class="submit" @click="submitStatus">是</view>
				<view class="no-submit" @click="applyDialog = false">否</view>
			</view>
		</you-popup>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import YouPopup from "@/components/you-popup/index.vue"
	import api_mine from '@/api/mine'
	import pageConfig from '@/config'

	export default {
		components: {
			NavBar,
			YouPopup
		},
		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				baseIconUrl: pageConfig.baseIconUrl,
				scrollHeight: '',
				applyDialog: false,
				tabActive: 0,
				tabList: [{
						label: '未使用',
						value: 0,
						numKey: 'unUsedNumber'
					},
					{
						label: '已使用',
						value: 2,
						numKey: 'usedNumber'
					},
					{
						label: '已转赠',
						value: 9,
						numKey: 'transferNumber'
					},
					{
						label: '已过期',
						value: 3,
						numKey: 'expiredNumber'
					}
				],
				couponNumConfig: {},
				couponList: [],
				isLoading: false,
				giveMoneyShow: false,
				moneyShow: false,
				slotName: 'btn',
				mainHeight: '',
				value: '',
				coupountInfo: {},
				status: {
					0: {
						title: '待服务',
						color: '#C27E15'
					},
					1: {
						title: '部分待服务',
						color: '#C27E15'
					},
					2: {
						title: '服务中',
						color: '#FF0000'
					}
				}
			}
		},
		onLoad(options) {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight.split('px')[0] - 50 + 'px'
			this.tabActive = Number(options.status)
			this.getCouponNumber()
			this.getCouponList()
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.mainHeight
		},
		methods: {
			TransferCoupon(item) {
				this.coupountInfo = item
				this.applyDialog = true
			},
			submitStatus() {
				const params = {
					userCouponId: this.coupountInfo.id,
					phoneNumber: this.value
				}
				api_mine.regift(params).then((res) => {
					if (res.code == 200) {
						this.value = ''
						this.applyDialog = false
						uni.showToast({
							icon: 'none',
							title: '转赠成功',
						})
						this.getCouponList()
						this.getCouponNumber()
					}
				})
			},
			clickTabsItem(item) {
				console.log(item);
				this.tabActive = item.value
				this.getCouponList()
				this.giveMoneyShow = item.giveMoneyShow
				this.moneyShow = item.moneyShow
				this.slotName = item.slotName
			},
			getCouponList(params) {
				this.isLoading = true
				api_mine.fetchCouponList({
					status: this.tabActive,
					pageSize: 999,
					pageNum: 1,
					isExcludeExpire: this.tabActive == 0 ? '1' : null
				}).then(res => {
					this.isLoading = false
					if (res.code !== 200) return
					this.couponList = res.rows
				}).catch(err => {
					this.isLoading = false
				})
			},
			clickToDetail(item) {
				console.log(item, 'item');
				item.tabActive = this.tabActive
				const params = encodeURIComponent(JSON.stringify(item));
				this.$tab.navigateTo(`/subPages/coupon/couponDetail?params=${params}`)
			},
			clickToUse() {
				uni.switchTab({
					url: '/pages/index'
				})
			},
			getCouponNumber() {
				// api_mine.fetchCouponList({
				// 	status: 0
				// }).then(res => {
				// 	if (res.code !== 200) return
				// 	this.couponNumConfig.notUseCoupon = res.total
				// })
				// api_mine.fetchCouponList({
				// 	status: 2
				// }).then(res => {
				// 	if (res.code !== 200) return
				// 	this.couponNumConfig.useCoupon = res.total
				// })
				// api_mine.fetchCouponList({
				// 	status: 3
				// }).then(res => {
				// 	if (res.code !== 200) return
				// 	this.couponNumConfig.expireCoupon = res.total
				// })
				// api_mine.fetchCouponList({
				// 	status: 9
				// }).then(res => {
				// 	if (res.code !== 200) return
				// 	this.couponNumConfig.TransferCoupon = res.total
				// })
				api_mine.queryUserCouponClassifyCount().then(res => {
					if (res.code !== 200) return
					this.couponNumConfig = res.data

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.tabs-box {
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 50px;
		padding: 0 28rpx;
		background-color: #C27E15;
		color: #fff;

		.tabs-item {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 28rpx;
			min-width: 120rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
		}

		.active-item {
			font-weight: bold;
		}

		.bottom-line {
			position: absolute;
			bottom: 0;
			width: 80rpx;
			height: 6rpx;
			background: #ffffff;
			border-radius: 3rpx;
		}
	}

	.widthBtn {
		width: 168rpx;
	}

	.card {
		padding: 32rpx;

		.card-item {
			width: 673rpx;
			height: 213rpx;
			background-size: cover !important;
			background-position: center !important;
			margin-top: 24rpx;
			display: flex;

			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 189rpx;
				color: #FFFFFF;

				.money-once {
					.money-item {
						font-size: 72rpx;
						font-family: DIN, DIN;
						font-weight: bold;
					}
				}

				.money-twice {
					font-size: 22rpx;
				}
			}

			.right {
				width: 484rpx;
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right-content {
					font-family: Source Han Sans CN, Source Han Sans CN;

					.right-title {
						font-size: 34rpx;
						font-weight: bold;
						color: #333333;
						line-height: 45rpx;
					}

					.right-time {
						margin: 6rpx 0;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						line-height: 36rpx;
					}

					.right-type {
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						line-height: 36rpx;
					}

					.right-rule {
						font-size: 24rpx;
						font-weight: 500;
						color: #C27E15;
						line-height: 36rpx;
					}
				}

				.not-use-btn,
				.use-btn {
					width: 128rpx;
					height: 55rpx;
					font-size: 26rpx;
					text-align: center;
					color: #FFFFFF;
					line-height: 55rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					background: linear-gradient(90deg, #FF9241 0%, #FF7003 100%);
					border-radius: 42rpx 42rpx 42rpx 42rpx;
					opacity: 1;
					margin-bottom: 8rpx;
				}

				.use-btn {
					background: #b1b1b1;
				}
			}
		}
	}
</style>